<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="business/layout">
<head>
<meta charset="utf-8"/>
<title>天天点餐</title>
</head>
<body class="no-skin">
<div layout:fragment="content">
  <div class="main-inner">
    <div class="container">
      	<div class="span12">
      			<div class="info-box">
				<a class="button button-block button-rounded button-action button-large add-food-type">增添菜系</a>
				<table id="showTable" class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>菜系名</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr th:each="foodType : ${foodTypes}">
							<td th:text="${foodType.typeName}">菜系名</td>
							<td>
								<button type="button" class="btn btn-success update-food-type" th:value="${foodType.id}">修改</button>
								<button type="button" th:value="${foodType.id}"  class="btn btn-danger delete-food-type">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
				</div>
      		</div>
         </div>
    </div>
    <!-- /container --> 
  <!-- /main-inner --> 

<div class="modal hide" id="addFoodTypeModal" tabindex="-1" role="dialog"
			aria-labelledby="addFoodTypeModallabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="addFoodTypeModallabel">添加菜色</h4>
					</div>
					<div class="modal-body">
						<form id="addFoodTypeForm" method="post">
							<p>
								<label>菜系名</label><input type="text" name="foodTypeName"/>
							</p>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button id="addFoodTypeSaveBtn" type="button" class="btn btn-primary">保存</button>
					</div>
				</div>
			</div>
		</div>
		
	<div class="modal hide" id="updateFoodTypeModal" tabindex="-1" role="dialog"
			aria-labelledby="updateFoodTypeModallabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="updateFoodTypeModallabel">修改菜色</h4>
					</div>
					<div class="modal-body">
						<form id="updateFoodTypeForm" method="post">
							<div id="foodTypeId" name="foodTypeId" class="hidden"></div>
							<p>
								<label>菜系名</label><input type="text" name="foodTypeName"/>
							</p>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button id="updateFoodTypeSaveBtn" type="button" class="btn btn-primary">保存</button>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">     
/*<![CDATA[*/
	$(document).ready(function(){
		//点击添加菜色
		$('.add-food-type').click(function(){
			$("#addFoodTypeForm select[name='foodTypeName']").val("");
			$('#addFoodTypeModal').modal('show');
		});
		
		//点击修改菜色
		$('.update-food-type').click(function(){
			var value = $(this).val();
			var text = $(this).parent().parent().find('td').eq(0).text();
			$('#foodTypeId').val(value);
			$('#updateFoodTypeForm input[name="foodTypeName"]').val(text);
			$('#updateFoodTypeModal').modal('show');
		});
		
		$('.delete-food-type').click(function(){
			var msg = "您真的确定要删除吗？\n\n请确认！";
			if(confirm(msg)){
				var value = $(this).val();
				location.href = "/food/deleteFoodTypeById/"+value;
			}
		});
		
		//提交修改
		$('#updateFoodTypeSaveBtn').click(function(){
			var id = $('#updateFoodTypeForm #foodTypeId').val();
			var name = $('#updateFoodTypeForm input[name="foodTypeName"]').val();
			$.ajax({
				type : "POST",
				url : "/food/updateFoodType",
				data: {id : id, typeName : name},
				success: function(data){
					if(data == "success"){
						window.location.reload();
					} else {
						alert('修改失败,该菜系已有');
					}
				}
			});
		});
		
		//提交添加
		$('#addFoodTypeSaveBtn').click(function(){
			var name = $('#addFoodTypeForm input[name="foodTypeName"]').val();
			if($('#addFoodTypeForm').valid()){
				$.ajax({
					type : "POST",
					url : "/food/addFoodType",
					data: {typeName : name},
					success: function(data){
						if(data == "success"){
							window.location.reload();
						} else {
							alert('添加失败， 该菜系已有');
						}
					}
				});
			}
		});
	});
	/*]]>*/
    </script><!-- /Calendar -->
    <script type="text/javascript" th:src="@{/js/jquery.metadata.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery.validate.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/messages_zh.js}"></script>
    <script type="text/javascript">
    	$('#addFoodTypeForm').validate({
    		rules : {
    			foodTypeName : {
    				required : true,
    				maxlength : 10
    			}
    		}
    	});
    </script>
	</div>
</body>
</html>
